import React, { lazy, Suspense, useRef } from "react";
import { Routes, Route } from "react-router-dom";
import { filter, map } from 'rxjs/operators';
import { ymUserServiceFactory } from "src/services/account/user";
import { AuthGuard } from 'src/common/components/auth.guard';

const Account = lazy(() => import('./pages/account'));

export default () => {
  const userService = useRef(ymUserServiceFactory());
  const auth$ = userService.current.auth$.pipe(filter(val => val !== undefined));

  return (
    <div className="market-account">
      <Suspense fallback={null}>
        <Routes>
          <Route path="" element={null}></Route>
          <Route path="/login" element={ <AuthGuard Component={<Account type="login" />} redirect="/" canActivate={() => true} /> } />
        </Routes>
      </Suspense>
    </div>
  )

}